<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1, minimum-scale=1,user-scalable=no">
    <script src="./node_modules/amfe-flexible/index.min.js"></script>
    <!-- 在线CDN链接 -->
    <!-- <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible.js"></script> -->
    <!-- <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script> -->
    <!-- 
        官方实例页面地址：
        http://huodong.m.taobao.com/act/yibo.html
     -->
    <style>
        :root {
            --bg-base-color: #EE0A3B;
        }

        * {
            padding: 0;
            margin: 0;
        }

        .container {
            background-color: var(--bg-base-color);
        }

        .banner {

            text-align: center;
        }

        .banner img {
            width: 10rem;
            height: auto;
        }

        .list {
            background: #FFF;
            margin: .133333rem;
            overflow: hidden;
        }

        .list>li {
            overflow: hidden;
            list-style-type: none;
            display: table;
            margin: .133333rem;
            width: 100%;
            border-bottom: 1px solid var(--bg-base-color);
        }

        .list>li>img {
            display: table-cell;
        }

        .list>li>div {
            position: relative;
            display: table-cell;
            vertical-align: top;
            padding: 0 .25rem;
            font-size: .213333rem;
            font-weight: normal;
        }

        .list>li .btn {
            background-color: var(--bg-base-color);
            color: #FFF;
            padding: .133333rem;
            border: 0;
            outline: none;
            position: absolute;
            /* bottom: .133333rem; */
            bottom:0;
            right: .266667rem;
        }

        .title {
            font-size: .346667rem;
            font-weight: 700;
            color: var(--bg-base-color)
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="banner">
            <img src="./imgs/banner.jpg" alt="">
        </div>
        <ul class="list">
            <li>
                <img src="https://dummyimage.com/160x160/E3243F/FFF.png&text=flexible.js" alt="">
                <div>
                    <div class="title">商品名称1</div>
                    <div>Nike耐克官方ZOOM KOBE VENOMENON 5 EP 科比男子篮球鞋815757</div>
                    <button class="btn">立即购买</button>
                </div>
            </li>
            <li>
                <img src="https://dummyimage.com/160x160/E3243F/FFF.png&text=flexible.js" alt="">
                <div>
                    <div class="title">商品名称2</div>
                    <div>Nike耐克官方ZOOM KOBE VENOMENON 5 EP 科比男子篮球鞋815757</div>
                    <button class="btn">立即购买</button>
                </div>
            </li>
            <li>
                <img src="https://dummyimage.com/160x160/E3243F/FFF.png&text=flexible.js" alt="">
                <div>
                    <div class="title">商品名称3</div>
                    <div>Nike耐克官方ZOOM KOBE VENOMENON 5 EP 科比男子篮球鞋815757</div>
                    <button class="btn">立即购买</button>
                </div>
            </li>
        </ul>
    </div>
    <script>
        // 防抖函数
        // handler: 要执行的回调函数
        // delay: 延迟时间, 单位ms
        const debounce = (handler, delay = 200) => {
            // 记录定时器id, 方便移除未执行的定时器
            let timeId;
            return function () {
                // 保存this指向
                let context = this;
                // 事件处理函数参数
                let args = arguments;
                // 先移除之前的延时定时器
                timeId > 0 && clearTimeout(timeId);
                timeId = setTimeout(() => {
                    handler.apply(context, args);
                }, delay);
            }
        }

        let index = 3;
        // scroll事件处理函数
        const handler = () => {
            const container = document.querySelector('.container');
            const list = document.querySelector('.list');
            // 获取父容器底部距离页面顶部的距离
            const {
                bottom
            } = container.getBoundingClientRect();
            const len = document.querySelector('.list').children.length;
            if (bottom <= window.innerHeight) {
                if (len >= 30) {
                    return console.log('暂无更多数据!');
                }

                index++;
                // console.log('开始加载更多数据');
                const li = document.createElement('li');
                // 随机生成16进制颜色
                const color = Math.random().toString(16).slice(2, 8);
                li.innerHTML = `
                        <img src="https://dummyimage.com/160x160/${color}/FFF.png&text=flexible.js" alt="">
                        <div>
                            <div class="title">商品名称${index}</div>
                            <div>Nike耐克官方ZOOM KOBE VENOMENON 5 EP 科比男子篮球鞋815757</div>
                            <button class="btn">立即购买</button>
                        </div>
                    `
                list.appendChild(li);
            }
        }
        window.addEventListener('scroll', debounce(handler));
    </script>
</body>

</html>